<template>
  <div class="housing">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房源管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="销售楼盘" name="first">
        <el-card>
          <el-row :gutter="21">
            <el-col :span="4">
              <el-select
                v-model="pojo.tid1"
                filterable
                placeholder="请选择省份"
                @change="changePro"
              >
                <el-option
                  v-for="item in tlist1"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="pojo.tid2"
                filterable
                placeholder="请选择城市"
                @change="changeCity"
              >
                <el-option
                  v-for="item in tlist2"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="pojo.tid3"
                filterable
                placeholder="请选择区县"
                @change="changeArea"
              >
                <el-option
                  v-for="item in tlist3"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-input
                v-model="queryInfo.keyword"
                placeholder="关键字"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="findKeyWord">搜索</el-button>
            </el-col>
          </el-row>
          <HouSingDialog ref="houDialog"></HouSingDialog>
          <el-button type="primary" class="addBut" @click="addHouList"
            >添加</el-button
          >
        </el-card>
        <el-table :data="HousingList" style="width: 100%">
          <el-table-column
            label="序号"
            prop="id"
            width="50px"
          ></el-table-column>
          <el-table-column
            label="楼盘名称"
            prop="title"
            width="120px"
          ></el-table-column>
          <el-table-column
            label="所属区域"
            prop="area"
            width="170px"
          ></el-table-column>
          <el-table-column
            label="价格"
            prop="price"
            width="50px"
          ></el-table-column>
          <el-table-column
            label="更新时间"
            prop="create_time"
            width="180px"
          ></el-table-column>
          <el-table-column
            label="排序"
            prop="sort"
            width="80px"
          ></el-table-column>
          <el-table-column label="状态" width="80px">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.type"
                class="isShow"
                :active-value="'1'"
                :inactive-value="'0'"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span size="mini">户型</span> | <span size="mini">相册</span> |
              <span size="mini">动态</span> |
              <span size="mini">沙盘</span>
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
                type="primary"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="房屋租赁" name="second">
        <HouSing
          :lease="LeaseList"
          :total="LeaseTotal"
          :queryInfo="queryInfo"
          :getLeaseList="getLeaseList"
        ></HouSing>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import HouSing from '../../components/HouSing'
import HouSingDialog from '../../components/HouSingDialog'
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      queryInfo: {
        keyword: '',
        pageIndex: 1,
        pageSize: 5
      },
      activeName: 'first',
      pojo: {
        tid1: '',
        tid2: '',
        tid3: ''
      },
      tlist1: [],
      tlist2: [],
      tlist3: []
    }
  },
  components: {
    HouSingDialog,
    HouSing
  },
  computed: {
    ...mapState('housing', ['HousingList', 'total', 'LeaseList', 'LeaseTotal'])
  },
  methods: {
    changePro () {
      this.pojo.tid2 = ''
      this.pojo.tid3 = ''
      this.$http
        .get('/housing', {
          params: {
            pid: this.pojo.tid1
          }
        })
        .then((res) => {
          this.tlist2 = res.data.data.provinces
        })
      this.getHousingList(this.queryInfo)
    },
    changeCity () {
      this.pojo.tid3 = ''
      this.$http
        .get('/housing', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getHousingList(this.queryInfo)
    },
    changeArea () {
      this.$http
        .get('/housing', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getHousingList(this.queryInfo)
    },
    ...mapActions('housing', ['getHousingList', 'getLeaseList']),
    handleEdit (row) {
      this.$refs.houDialog.form = row
      this.$refs.houDialog.dialogFormVisible = true
    },
    addHouList () {
      this.$refs.houDialog.form = {
        title: '',
        price: '',
        sort: '',
        area: ''
      }
      this.$refs.houDialog.dialogFormVisible = true
    },
    handleDelete (row) {
      this.$http.delete(`/housing/${row.id}`).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        }
        this.$message.success(res.data.message)
        this.getHousingList(this.queryInfo)
      })
    },

    handleChange (val) {
      console.log(val)
    },
    handleSizeChange (newsize) {
      this.queryInfo.pageSize = newsize
      this.getHousingList(this.queryInfo)
    },
    handleCurrentChange (current) {
      this.queryInfo.pageIndex = current
      this.getHousingList(this.queryInfo)
    },
    findKeyWord () {
      this.getHousingList(this.queryInfo)
    },
    changeSwitch (row) {
      this.$http.put('/housing/edit/type', row).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
        }
      })
    },
    getList () {
      this.$http
        .get('/housing', {
          params: {
            pid: 0
          }
        })
        .then((res) => {
          this.tlist1 = res.data.data.provinces
        })
    }
  },
  created () {
    this.getList()
    this.getHousingList(this.queryInfo)
  }
}
</script>

<style scoped>
.housing {
  width: 100%;
  height: 100%;
}
.addBut {
  margin: 5px 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #999;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: #169bd5;
}
.el-tabs__item.is-active {
  color: #fff;
}
</style>
